<template>
  <div class="callSkill">
    <configCompositionTwoWindowStyle v-show="getCallConfigFlag" :cdrWidth="'635'" :height="170">
      <template slot="card">
        <div v-loading="tableLoading">
          <search
            :inputTitle="$t('callServiceSkillGroup.callServiceSkillGroup2')"
            :isShowInput="false"
            :showAdvSearch="false"
            @add="addSkillGroup"
            @refresh="refreshSearch"
            @turnPage="turnPage"
            :currentPage="currentPage"
            :count=count
            :hidePage="false"
            :reload="reloadPbx"
            @roloadIvrSucc="roloadIvrSucc"
            :pageSize="pageSize">
          </search>
          <div class="search-wrap">
            <el-select size="mini" v-model="PBX" :placeholder="$t('public.pleasePick')" class="select" @change="pbxChange">
              <el-option
                      :label="$t('public.all')"
                      :value="''">
              </el-option>
              <el-option
                v-for="(item,index) in pbxs"
                :key="index"
                :label="item.NickName + ' (' +item.PBX + ')'"
                :value="item.PBX">
              </el-option>
            </el-select>
            <el-input
              size="mini"
              :placeholder="$t('callServiceSkillGroup.callServiceSkillGroup2')"
              class="condition"
              v-model="DisplayName"
              @keyup.enter.native="searchByName">
              <i
                class="el-input__icon el-icon-search"
                slot="suffix"
                @click="searchByName">
              </i>
            </el-input>
          </div>
          <diyTable :tableHeader="tableHeader" :tableData="tableData" @updata="updata" @del="del" @copy="copy" :tableType="tableType"></diyTable>
        </div>
      </template>
      <template slot="detail">
        <breadCrumb v-show="isShowRight" :titleArr="titleArr" @back="back"></breadCrumb>
        <div v-show="loadingRight" v-loading="loadingRight" :element-loading-text="$t('callServiceSkillGroup.callServiceSkillGroup45')" style="text-align: center;margin-top: 100px;"></div>
        <addOrEditCallServiceSkillGroup v-if="isIfRight" v-show="isShowRight && !loadingRight" :isAdd="isAdd" :skillInfo="skillInfo" @refresh="refresh" @reload="reload"></addOrEditCallServiceSkillGroup>
      </template>
    </configCompositionTwoWindowStyle>
    <div class="description" v-show="!getCallConfigFlag">
      <apply-to-config :isclearfix="true"></apply-to-config>
    </div>
  </div>
</template>
<script>
  import ApplyToConfig from '../../telCustomerService/ApplyToConfig.vue'
  import configCompositionTwoWindowStyle from '../../../../../ui-modules/config/configCompositionTwoWindowStyle'
  import diyTable from '../../base/diyTable'
  import search from '../../base/search'
  import breadCrumb from '../../../../../ui-modules/breadCrumb/BreadCrumbConfig.vue'
  import addOrEditCallServiceSkillGroup from './addOrEditCallServiceSkillGroup'
  import { trimObjEmptyValue, ivrSearch, deepClone } from '@/utils/m7Utils.js'
  export default {
    data () {
      return {
        count: 0,
        agents: [],
        currentPage: 1,    //   当前页
        pageSize: 10,
        PBX: '',
        pbxs: [],
        DisplayName: '',
        tableHeader: [
          {prop: 'DisplayName', label: this.$t('callServiceSkillGroup.callServiceSkillGroup3')},
          {prop: 'UpdateTime', label: this.$t('channelsettings.serviceNumber18')},
          {prop: 'UpdateAgent', label: this.$t('callServiceSkillGroup.callServiceSkillGroup4')},
          {prop: 'PBX', label: 'PBX'},
          {prop: '', label: this.$t('public.operate')}
        ],                        //   自定义 表头
        tableData: [],           //  表格数据
        tableLoading: false,      //   表格  loading
        isIfRight: false,    //   是否展示右侧详情
        isShowRight: false,    //   是否展示右侧详情
        isAdd: false,    //   添加技能组
        reloadPbx: true,
        titleArr: [this.$t('callServiceSkillGroup.callServiceSkillGroup1'), this.$t('callServiceSkillGroup.callServiceSkillGroup5')],
        inputConditionSkillName: '',
        skillInfo: {},
        dataList: [],
        tableType:'call'
      }
    },
    components: {
      configCompositionTwoWindowStyle,
      search,
      breadCrumb,
      diyTable,
      addOrEditCallServiceSkillGroup,
      ApplyToConfig
    },
    computed: {
      getCallConfigFlag () {
        let localFlag = window.sessionStorage.getItem('ucenterLoginFlag') || 'no'
        let route = this.$route.path.split('/')[2]
        if (localFlag === 'yes' || this.$store.state.session.user.type === 'admin' || this.$store.state.oemObj.oemFlag || route === 'newConfig') {
          return true
        }
        return this.$store.state.isNormalCallConfig
      },
      loadingRight () {
        return this.$store.state.config.channelConfig.call.skillGroupLoading // 发送 getnode请求  响应时间较长  加loading 提示
      }
    },
    methods: {
      back () {
        this.isShowRight = false
      },
      refreshSearch (addOrEditPBX) {
        this.isAdd = false
        this.refresh(addOrEditPBX)
      },
      refresh (addOrEditPBX, deleteFlag) {
        if (this.isAdd && !deleteFlag) { // 添加回到第一页
          this.currentPage = 1
        }
        this.DisplayName = ''
        this.search(addOrEditPBX, deleteFlag)
      },
      handleFakePage (_array) {
        for (let i = (this.currentPage - 1) * 10; i < this.currentPage * 10 && i < _array.length; i++) {
          this.tableData.push(_array[i])
        }
      },
      pbxChange () {
        this.searchByName()
      },
      searchByName () {
        this.currentPage = 1
        this.search()
      },
      inputChangeSkillName (val) {
        this.DisplayName = val
      },
      search (addOrEditPBX, deleteFlag) {
        this.tableLoading = true
        let DisplayName = this.DisplayName || ''
        let data = {page: this.currentPage, limit: 10, paging: true, DisplayName}
        data.Account = this.$store.state.session.account.account
        data.PBX = this.PBX
        trimObjEmptyValue(data)
        this.tableData = []
        let _pageList = []
        this.dataList = []
        this.$store.dispatch('queryQueueForSkill', data).then(res => {
          this.tableLoading = false
          if (res.success) {
            _pageList = res.list || []
            if (_pageList.length === 0 && deleteFlag) {
              let page = Math.ceil(res.count / 10)
              if (res.count === 0) {
                // 第一页且count为0是不再发请求
                this.currentPage = 1
              } else {
                this.currentPage = page
                this.search(addOrEditPBX, true)
                return false
              }
            }
            this.dataList = deepClone(_pageList)
            this.count = res.count
            this.tableData = _pageList
            this.isShowRight = false
            if (addOrEditPBX) {  //  增改 删除  改变 vuex里的 技能组数据
              let addOrEditPBXList = []
              for (let i = 0; i < res.list.length; i++) {
                if (res.list[i].PBX === addOrEditPBX) {
                  addOrEditPBXList.push(res.list[i])
                }
              }
              this.$store.commit('SET_IVRMAP_DETAIL', {PBX: addOrEditPBX, typeName: 'ivr_node_queue', data: addOrEditPBXList || [], flag: 'data', node: this})
            }
          }
        })
      },
      turnPage (val) {
        this.currentPage = val
        this.tableData = []
        // this.handleFakePage(this.dataList)
        this.search()
      },
      addSkillGroup () {
        this.isAdd = true
        this.skillInfo = {}
        this.isShowRight = true
        this.isIfRight = true
        this.titleArr.splice(1, 1, this.$t('callServiceSkillGroup.callServiceSkillGroup5'))
      },
      updata (val) {
        this.isAdd = false
        this.skillInfo = val
        this.isIfRight = true
        this.isShowRight = true
        this.titleArr.splice(1, 1, this.$t('callServiceSkillGroup.callServiceSkillGroup6'))
        // if (this.$store.state.session.ivrMap && this.$store.state.session.ivrMap[val.PBX]) {
        //   this.skillInfo = val
        //   this.isIfRight = true
        //   this.isShowRight = true
        //   this.titleArr.splice(1, 1, '修改技能组')
        // } else {
        //   let data = {}
        //   data.Account = this.$store.state.session.account.account
        //   data.PBX = val.PBX
        //   this.loadingRight = true
        //   this.$store.dispatch('getAllNodesByPbxForSkill', data).then(res => {
        //     if (res.success) {
        //       this.loadingRight = false
        //       this.skillInfo = val
        //       this.isIfRight = true
        //       this.isShowRight = true
        //       this.titleArr.splice(1, 1, '修改技能组')
        //     }
        //   })
        // }
      },
      del (val) {
        let data = val
        this.$confirm(this.$t('callServiceSkillGroup.callServiceSkillGroup72'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('deleteQueueForSkill', data).then(res => {
            if (res.success) {
              this.refresh(data.PBX, 'delete')
              this.$message({
                message: this.$t('callServiceSkillGroup.callServiceSkillGroup73'),
                type: 'success'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('public.cancel')
          })
        })
      },
      //复制
      copy (val) {
        let data = val
        this.$confirm(this.$t('callServiceSkillGroup.callServiceSkillGroup76'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('cloneQueueForSkill', data).then(res => {
            if (res.success) {
              this.refresh(data.PBX, 'clone')
              this.$message({
                message: this.$t('callServiceSkillGroup.callServiceSkillGroup77'),
                type: 'success'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('public.cancel')
          })
        })
      },
      roloadIvrSucc () {
        this.reloadPbx = true
      },
      reload (flag) { // 生效可以点击
        this.reloadPbx = flag
      }
    },
    beforeMount () {
      this.pbxs = this.$store.state.session.account.pbx
      this.PBX = ''
      this.search()
    },
    deactivated () {
      let isGetAllIvrMap = this.$store.state.session.isGetAllIvrMap
      if (!isGetAllIvrMap) {
        this.$store.commit('EMPTY_IVRMAP')
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .callSkill
    .search-wrap
      padding 3px 10px
      border-top 1px solid $c-border1
      text-align center
      .el-input,.el-select
        width 46%
      .el-select
        margin-right 20px
    .warn-wrap
      padding 15px
      text-align center
    .warn
      color $c-prompt
      padding-bottom 20px
      text-align left
  .description
    padding 15px 15px 30px 15px
    height calc(100vh - 135px)
    overflow-y auto
</style>
